import React, { useState } from 'react';
import { Layout, Row, Col, Card, Typography, Divider } from 'antd';
import { PictureOutlined } from '@ant-design/icons';
import CozeImageAnalyzer from './index';
import CozeConfigComponent, { type CozeConfig } from './CozeConfig';

const { Content } = Layout;
const { Title, Paragraph } = Typography;

const ImageAnalysisPage: React.FC = () => {
  const [cozeConfig, setCozeConfig] = useState<CozeConfig>({
    token: '',
    botId: '',
    baseUrl: 'https://api.coze.cn',
  })

  const [analysisHistory, setAnalysisHistory] = useState<string[]>([])

  const handleConfigChange = (config: CozeConfig) => {
    setCozeConfig(config);
  };

  const handleAnalysisComplete = (result: string) => {
    setAnalysisHistory(prev => [result, ...prev.slice(0, 4)]); // 保留最近5次分析结果
  };

  const isConfigured = cozeConfig.token && cozeConfig.botId;

  return (
    <Layout style={{ minHeight: '100vh', background: '#f0f2f5' }}>
      <Content style={{ padding: '24px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          {/* 页面标题 */}
          <Card className="page-header" style={{ marginBottom: '24px', textAlign: 'center' }}>
            <Title level={2} className="page-title">
              <PictureOutlined style={{ marginRight: '12px', color: '#1890ff' }} />
              智能图片分析系统
            </Title>
            <Paragraph type="secondary" className="page-description">
              基于Coze AI的图片内容分析工具，支持上传图片并获得详细的内容描述和分析结果
            </Paragraph>
          </Card>

          <Row gutter={[24, 24]}>
            {/* 左侧配置区域 */}
            <Col xs={24} lg={8}>
              <CozeConfigComponent onConfigChange={handleConfigChange} initialConfig={cozeConfig} />

              {/* 使用说明 */}
              <Card title="使用说明" style={{ marginTop: '20px' }}>
                <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
                  <p>
                    <strong>第一步：</strong> 配置Coze API参数
                  </p>
                  <p>
                    <strong>第二步：</strong> 上传需要分析的图片
                  </p>
                  <p>
                    <strong>第三步：</strong> 等待AI分析完成
                  </p>
                  <p>
                    <strong>第四步：</strong> 查看详细分析结果
                  </p>

                  <Divider style={{ margin: '12px 0' }} />

                  <p style={{ color: '#666', fontSize: '12px' }}>
                    <strong>注意：</strong> 请确保上传的图片清晰且内容合规，
                    系统支持常见的图片格式（JPG、PNG、GIF等）， 单个文件大小不超过10MB。
                  </p>
                </div>
              </Card>

              {/* 分析历史 */}
              {analysisHistory.length > 0 && (
                <Card title="最近分析" className="history-section" style={{ marginTop: '20px' }}>
                  <div style={{ maxHeight: '300px', overflow: 'auto' }}>
                    {analysisHistory.map((result, index) => (
                      <div key={index} className="history-item">
                        {result.substring(0, 100)}...
                      </div>
                    ))}
                  </div>
                </Card>
                )}
              </Col>

            {/* 右侧分析区域 */}
            <Col xs={24} lg={16}>
              {isConfigured ? (
                <CozeImageAnalyzer
                  cozeToken={cozeConfig.token}
                  botId={cozeConfig.botId}
                  baseUrl={cozeConfig.baseUrl}
                  onAnalysisComplete={handleAnalysisComplete}
                />
              ) : (
                <Card className="empty-state">
                  <div>
                    <PictureOutlined className="empty-icon" />
                    <Title level={4} className="empty-title" type="secondary">
                      请先完成Coze配置
                    </Title>
                    <Paragraph className="empty-description" type="secondary">
                      在左侧配置区域填入正确的API Token和Bot ID，
                      然后就可以开始使用图片分析功能了。
                    </Paragraph>
                  </div>
                </Card>
              )}
            </Col>
          </Row>
        </div>
      </Content>
    </Layout>
  );
};

export default ImageAnalysisPage;
